<template>
  <!-- 详情 -->
<div class="root">

  <h1>{{tableData.title}}</h1><br>
  <div class="zi">
    <div class="fs">{{tableData.author}} &nbsp;&nbsp;&nbsp;<text class="tex">{{tableData.add_time}}<hr></text></div>
    <div class="con">
      {{tableData.content}}
    </div>
    <div>{{tableData.keywords}}</div>

      <div>
        <img :src="tableData.thumb" alt="暂无图片">
      </div>

  </div>

</div>
</template>

<script setup lang='ts'>
  import {ref,reactive,onMounted} from 'vue'
  import { useRoute } from 'vue-router';
  import {show} from '../../api/login/index'

  // 接收跳转过来的参数
  const Route = useRoute(); //获取到值
  onMounted(() => {
      console.log("获取到的参数", Route.query);  //接收到的参数
  })

  let tableData:any = ref({})
  let xiangqing = async() =>{
    let res = await show({id:Route.query.news_id})
    console.log(res);
    tableData.value = res.data
    console.log(tableData);
  }
  xiangqing()

</script>

<style scoped lang='less'>
.root{
  width: 400px;
}
  .zi{
    font-size: 10px;
  }
  .tex{
    color:rgb(223, 207, 207);
  }
  .fs{
    margin-bottom: 20px;
  }
  .con{
    margin-bottom: 20px;
  }
  img{
    width: 200px;
    height: 200px;
    margin-top: 30px;
  }
</style>